<template>
    <div class="entranceregister">
        <div class="loginHeader">
            <div class="headercont set-left-center">
                <el-image class="img" :src="require('@/assets/images/icon/logo1.png')" fit="fill" />
                <div class="headertitle">云上农场 · 重庆站</div>
            </div>
        </div>
        <div class="entranceCont">
            <div>
                <div class="loginBox">
                    <div class="formTitle">
                        <div class="lt">云上农场</div>
                        <div class="rt">
                            已有账号，
                            <el-button type="primary" link @click="toelsepages('/login')"
                                >去登录
                                <el-icon><ArrowRight /></el-icon>
                            </el-button>
                        </div>
                    </div>
                    <div class="boxform">
                        <div class="boxformtitle">找回密码</div>
                        <el-form :model="formInline" :rules="rules" size="large" ref="ruleFormRef" class="demo-form-inline">
                            <!-- <el-form-item label="">
                                <div class="fromItems">
                                    <el-input v-model="formInline.input3" class="inputwithselect" placeholder="国家"></el-input>
                                    <div class="country">国家/地区</div>
                                </div>
                            </el-form-item> -->
                            <el-form-item label="" prop="phone">
                                <el-input v-model="formInline.phone" placeholder="手机号">
                                    <template #prepend>+86（中国）</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="" prop="code">
                                <div class="fromItems">
                                    <el-input v-model="formInline.code" class="codeinput" placeholder="短信验证码"></el-input>
                                    <el-button type="primary" link class="getCode" @click="getPhoneCode">{{ phoneCodeText }}</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item label="">
                                <div class="tiptitle">设置新密码</div>
                                <div class="pswtip">如果您有其他设备使用此账号，设置新密码后需重新登录，以确保正 常使用云上农场服务。</div>
                            </el-form-item>
                            <el-form-item label="" prop="newpassword">
                                <el-input v-model="formInline.newpassword" type="password" show-password placeholder="请输入密码"></el-input>
                            </el-form-item>
                            <el-form-item label="" prop="pwd">
                                <el-input v-model="formInline.pwd" type="password" show-password placeholder="确认密码"> </el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <div class="tiptitle">密码需满足以下要求：</div>
                                <div class="pswtips">
                                    <el-icon :color="formInline.pwdsafety1"><CircleCheck /></el-icon><span>至少8个字符</span>
                                </div>
                                <div class="pswtips">
                                    <el-icon :color="formInline.pwdsafety2"><CircleCheck /></el-icon><span>至少含字母和数字，不能包含空格</span>
                                </div>
                                <div class="tiptitles">密码强度:</div>
                                <div class="strength">
                                    <div class="strengths" :style="{ width: `${formInline.schedule}%` }"></div>
                                </div>
                                <div class="pswtips">勿使用其他帐号的密码</div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" class="submitBtn" @click="onSubmit(ruleFormRef)">确定</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="toelsepage">
                    <el-button type="primary" link>《云上农场帐号用户协议》</el-button><span>丨</span> <el-button type="primary" link>《关于云上农场帐号与隐私的声明》</el-button><span>丨</span>
                    <el-button type="" link>常见问题</el-button>
                </div>
                <div class="logintip">云上农场帐号 版权所有 © 2011-2022</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules, Action } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { updateUserPasswordCode, forgetpwd } from "@/api/auth";
import { Md5 } from "ts-md5";
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const phoneCodeText = ref("获取验证码");
const time = ref(60);
const formInline = reactive({
    phone: "",
    code: "",
    newpassword: "",
    pwd: "",
    schedule: "100",
    pwdsafety1: "#999999",
    pwdsafety2: "#999999",
});
const rules = reactive<FormRules>({
    phone: [{ required: true, pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: "请正确填写手机号码", trigger: "blur" }],
    code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
    newpassword: [
        {
            required: true,
            validator: (rule, value, callback) => {
                const regs = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{8,}$/;
                let reg = /[0-9]/;
                let reg1 = /[a-z]/;
                let reg2 = /[A-Z]/;
                let reg3 = /[ ]/;
                if (value.length >= 8) {
                    formInline.pwdsafety1 = "#23b14d";
                    formInline.schedule = "80";
                    if (!reg3.test(value)) {
                        formInline.schedule = "70";
                        if ((reg.test(value) && reg1.test(value)) || reg2.test(value)) {
                            formInline.schedule = "60";
                            formInline.pwdsafety2 = "#23b14d";
                            if (value.length >= 16) {
                                formInline.schedule = "30";
                            }
                        } else {
                            formInline.pwdsafety2 = "#999999";
                        }
                    } else {
                        formInline.pwdsafety2 = "#999999";
                    }
                } else {
                    formInline.pwdsafety1 = "#999999";
                }
                if (!regs.test(value)) {
                    return callback(new Error("密码长度不能小于8个字符,至少含字母和数字，不能包含空格"));
                } else {
                    callback();
                }
            },
            trigger: "change",
        },
    ],
    pwd: [
        {
            required: true,
            validator: (rule, value, callback) => {
                const regs = /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{8,}$/;
                if (!value) {
                    return callback(new Error("密码长度不能小于8个字符,至少含字母和数字，不能包含空格"));
                }
                if (value === formInline.newpassword) {
                    callback();
                } else {
                    return callback(new Error("两次输入密码不一致!"));
                }
            },
            trigger: "change",
        },
    ],
});
const getPhoneCode = () => {
    const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
    if (!reg.test(formInline.phone)) {
        ElMessage.error("请正确填写手机号码");
        return;
    }
    if (time.value < 60) {
        return;
    } else {
        let countdown = setInterval(() => {
            if (time.value > 0) {
                phoneCodeText.value = `${time.value} S`;
                time.value -= 1;
            } else {
                clearInterval(countdown);
                phoneCodeText.value = "获取验证码";
            }
        }, 1000);
        updateUserPasswordCode(formInline.phone)
            .then((res) => {
                ElMessage.success("短信发送成功");
            })
            .catch((err) => {
                clearInterval(countdown);
                ElMessage.error(err);
                time.value = 60;
                phoneCodeText.value = "获取验证码";
            });
    }
};
const toelsepages = (u: string) => {
    router.push(u);
};
const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            const md5: any = new Md5();
            md5.appendAsciiStr(formInline.newpassword);
            const password = md5.end();
            const postData = {
                phone: formInline.phone,
                validateCode: formInline.code,
                newPassword: password,
            };
            forgetpwd(postData).then((res) => {
                ElMessage.success("重设密码成功");
                ElMessageBox.alert("返回登录", "重设密码成功", {
                    confirmButtonText: "确定",
                    callback: (action: Action) => {
                        router.push("/login");
                    },
                });
            });
        } else {
            console.log("error submit!", fields);
        }
    });
};
</script>
<style lang="scss" scoped>
.loginHeader {
    width: 100%;
    height: 45px;
    background: #ffffff;
    padding: 0 40px;
    .headercont {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 860px;
        height: 45px;
    }

    .img {
        // width: 120px;
        height: 40px;
    }
    .headertitle {
        font-size: 16px;
        font-weight: bold;
        color: #333333;
        margin-left: 45px;
    }
}
.entranceCont {
    background-image: url(@/assets/image/loginbgimg.png);
    width: 100%;
    height: calc(100vh - 45px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    padding-top: 40px;
    .loginBox {
        width: 862px;
        height: 758px;
        background: #ffffff;
        border-radius: 6px;
        overflow: hidden;
        .formTitle {
            height: 77px;
            padding: 40px;
            border-bottom: 1px solid #eeeeee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .lt {
                font-size: 20px;
                color: #333333;
            }
            .rt {
                color: #333333;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .boxform {
            padding: 30px 220px;
            .boxformtitle {
                font-size: 24px;
                font-weight: bold;
                color: #333333;
                margin-bottom: 30px;
                text-align: center;
            }
            .tiptitle {
                font-size: 16px;
                color: #333333;
                width: 100%;
                line-height: 21px;
            }
            .tiptitles {
                font-size: 12px;
                color: #333333;
                width: 100%;
                line-height: 21px;
            }
            .pswtip {
                font-size: 14px;
                color: #999999;
                line-height: 21px;
            }
            .pswtips {
                font-size: 12px;
                color: #999999;
                line-height: 21px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                span {
                    margin-left: 10px;
                }
            }
            .strength {
                width: 100%;
                height: 2px;
                background: linear-gradient(to right, red 0%, yellow 50%, green 100%);
                position: relative;
                margin: 5px 0;
                .strengths {
                    width: 100%;
                    height: 2px;
                    background: #eeeeee;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
            .submitBtn {
                width: 100%;
            }
            .fromItems {
                position: relative;
                width: 100%;
                .codeinput {
                    width: 100%;
                }
                .getCode {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    right: 20px;
                }
                .country {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 20px;
                }
            }
            .formstip {
                font-size: 12px;
                color: #333333;
                text-align: justify;
                line-height: 22px;
                padding-top: 18px;
                padding-bottom: 18px;
                button {
                    font-size: 12px;
                    padding: 0;
                    margin-top: -5px;
                }
            }
        }
    }
    .toelsepage {
        color: #999999;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        margin-top: 30px;
    }
    .logintip {
        margin-top: 20px;
        font-size: 12px;
        color: #999999;
        text-align: center;
        width: 100%;
    }
}
</style>
<style>
.entranceregister .boxform .el-input-group__prepend {
    background: none;
    color: #333333;
}
.entranceregister .boxform .inputwithselect input {
    text-align: right;
}
</style>
